<template>
  <div class="relative w-full h-full">
    <div
      class="px-4 w-[320px] h-[300px] absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 shadow-lg rounded-lg flex flex-col justify-center items-center"
    >
      <div class="mb-6 text-xl font-bold">登录</div>
      <el-input class="h-12 mb-6" v-model="form.account"></el-input>

      <el-input
        class="h-12 mb-6"
        v-model="form.password"
        type="password"
      ></el-input>
      <el-button class="w-full" size="large" type="primary" @click="loginFun"
        >登录</el-button
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { login } from "@/apis/user";
import { setToken } from "@/utils/store";
import { reactive } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const form = reactive<LoginForm>({
  account: "admin",
  password: "adMin321.",
});
const loginFun = async () => {
  const res = await login({
    account: form.account,
    password: form.password,
  });
  setToken(res);
  router.push({ path: "/" });
};
</script>

<style scoped></style>
